<template>
	<view class="topbar" :style="{ paddingTop: safeTop + 'px' }">
    <view class="left" @click="emit('left')">
        <view v-if="!back" class="avatar">
            <image :src="leftIcon" class="icon-user" mode="heightFix" />
        </view>
        <view v-else class="avatar back">
            <text class="back-char">‹</text>
        </view>
    </view>
		<view class="center">
			<slot name="title"><text class="title">{{ title }}</text></slot>
		</view>
        <view class="right">
            <image :src="scanIcon" class="icon scan" @click.stop="emit('scan')" />
            <image id="topbar-menu-btn" :src="menuIcon" class="icon menu" @click.stop="handleMenuClick" />
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	title: { type: String, default: '' },
	leftIcon: { type: String, default: '/static/user.png' },
	scanIcon: { type: String, default: '/static/saoyisao.png' },
	menuIcon: { type: String, default: '/static/menu.png' },
    fixed: { type: Boolean, default: true },
    back: { type: Boolean, default: false }
});
const emit = defineEmits(['left', 'scan', 'menu']);
// 粗略安全区处理
const safeTop = 0;

function handleMenuClick() {
    try {
        const query = uni.createSelectorQuery();
        query.select('#topbar-menu-btn').boundingClientRect((rect) => {
            if (rect && typeof rect.bottom === 'number') {
                // 将锚点写入根元素 CSS 变量，供 AccountMenu 读取
                if (typeof document !== 'undefined' && document.documentElement && document.documentElement.style) {
                    document.documentElement.style.setProperty('--menu-anchor-top', (rect.bottom + 4) + 'px');
                    if (typeof window !== 'undefined') {
                        const appEl = typeof document !== 'undefined' ? document.getElementById('app') : null;
                        const gap = (appEl && appEl.getBoundingClientRect) ? (window.innerWidth - appEl.getBoundingClientRect().right) : 0;
                        document.documentElement.style.setProperty('--container-gap-right', Math.max(0, gap) + 'px');
                    }
                }
                emit('menu', { top: rect.bottom + 4 });
            } else {
                emit('menu', { top: 70 });
            }
        }).exec();
    } catch (e) {
        emit('menu', { top: 70 });
    }
}
</script>

<style>
.topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 120rpx;
	z-index: 1000;
	padding: 0 32rpx;
	box-sizing: border-box;
}
.left, .right { display: flex; align-items: center; }
.right { gap: 24rpx; }
.icon { height: 56rpx; width: 56rpx; }
.icon-user { height: 44rpx; width: 44rpx; }
.scan { height: 60rpx; width: 60rpx; }
.menu { height: 68rpx; width: 68rpx; }
.title { color: #fff; font-size: 36rpx; font-weight: 600; }
.center { flex: 1; display: flex; justify-content: center; }
.avatar { height: 72rpx; width: 72rpx; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.avatar.back { background: #fff; }
.back-char { color: #000; font-size: 52rpx; line-height: 52rpx; }

	/* PC宽屏时让顶部栏跟随居中容器，不铺满屏幕 */
	@media (min-width: 768px) {
		.topbar {
			left: 50%;
			right: auto;
			transform: translateX(-50%);
			width: 100%;
			max-width: 420px;
		}
	}
</style>

